@mixin aspect($name, $z) {
    @for $i from 1 through 6 {
        .aspect:nth-child(#{$i}) {
            background: url("./images/" + $name + "_" + $i + ".png") no-repeat center/100%;
        }
    }
    .aspect:nth-child(1) {
        transform: translateZ($z);
    }
    .aspect:nth-child(2) {
        transform: rotateX(180deg) translateZ($z);
    }
    .aspect:nth-child(3) {
        transform: rotateX(-90deg) translateZ($z);
    }
    .aspect:nth-child(4) {
        transform: rotateX(90deg) translateZ($z);
    }
    .aspect:nth-child(5) {
        transform: rotateY(-90deg) translateZ($z);
    }
    .aspect:nth-child(6) {
        transform: rotateY(90deg) translateZ($z);
    }
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: #1f1f1f;
}
.box {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(13deg);
    animation: move 5s linear infinite;
}
.box:hover {
    .outer {
        @include aspect("outer", 250px);
        .aspect {
            left: -25%;
            top: -25%;
            width: 150%;
            height: 150%;
            opacity: 0.8;
        }
    }
}
.inner {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    @include aspect("inner", 50px);
}
.outer {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    @include aspect("outer", 100px);
    .aspect {
        opacity: 0.2;
        transition: all 1s ease;
    }
}
.aspect {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

@keyframes move {
    0% {
        transform: rotateX(13deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(13deg) rotateY(360deg);
    }
}